<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_small'"
      :append-to-body="true"
      :title="btn.Setting"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <el-form
          ref="formData"
          :model="form"
          :rules="rules"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="dataList.IsCalibrationName"
            style="width: 100%"
            prop="isCalibration"
          >
            <el-select
              v-model="form.isCalibration"
              :placeholder="dataList.Placeholder"
              @change="isCalibrationChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.isCalibration == 1"
            :label="dataList.CalibrationPlanDate"
            style="width: 100%"
            prop="calibrationPlanDate"
          >
            <el-date-picker
              v-model="form.calibrationPlanDate"
              type="date"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="form.isCalibration == 1"
            :label="dataList.Week"
            prop="cycle"
          >
            <el-input
              v-model="form.cycle"
              style="width: 50%"
              oninput="value=value.replace(/[^\d]/g,'')"
              @change="cycleChange"
            ></el-input>
            <el-select
              ref="options"
              v-model="form.cycleName"
              style="width: 50%"
              :placeholder="dataList.Placeholder"
            >
              <el-option
                v-for="item in cycleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.isCalibration == 1"
            :label="dataList.CalibrationPersonName"
            prop="calibrationPerson"
          >
            <UserDropDownList
              :value="form.calibrationPerson"
              :return-objct.sync="returnObjct"
              @input="borrowPersonChange"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserDropDownList from "../../../components/UserDropDownList.vue";
import { YesAndNo, periodUnit } from "../../../utils/const";
export default {
  name: "DeviceCalibrationPlanSettingDialog",
  components: { UserDropDownList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    dataObjcet: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      returnObjct: true,
      options: YesAndNo,
      cycleOptions: periodUnit,
      innerDialogFormVisible: false,
      form: {
        isCalibration: 1,
        calibrationPlanDate: null,
        cycle: "",
        cycleName: "年",
        calibrationPerson: "",
        calibrationPersonName: "",
      },
      // 限制日期
      pickerOptions: {
        // 限制日期
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      rules: {
        calibrationPerson: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        cycle: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        calibrationPlanDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        isCalibration: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    if (this.dataObjcet != null) {
      this.form = JSON.parse(JSON.stringify(this.dataObjcet));
      if (this.form.isCalibration === "") {
        this.form.isCalibration = 1;
      }
      if (
        this.form.calibrationPerson === 0 ||
        this.form.calibrationPerson === "0"
      ) {
        this.form.calibrationPerson = null;
      }
      if (this.form.cycleName === null || this.form.cycleName === "") {
        this.form.cycleName = this.$i18n.locale === "en" ? "Year" : "年";
      }
    }
  },
  methods: {
    cycleChange(val) {
      this.form.cycle = val;
    },
    isCalibrationChange() {
      if (this.form.isCalibration === 0) {
        this.form.cycleName = null;
        this.form.cycle = null;
        this.form.calibrationPlanDate = null;
        this.form.calibrationPerson = null;
        this.form.isCalibrationName = this.$t("ModuleDevice.Device.Deny");
      }
    },
    borrowPersonChange(val) {
      this.form.calibrationPerson = val.value;
      this.form.calibrationPersonName = val.label;
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
    onSubmit() {
      if (Number(this.form.isCalibration) === 0) {
        this.form.cycle = null;
        this.$emit("settingDialogClose", this.form);
        this.cancel();
      } else {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.$emit("settingDialogClose", this.form);
            this.cancel();
          }
        });
      }
    },
  },
};
</script>
